:host {
  display: flex;
  flex-direction: row;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
}

.mat-mdc-nav-list {
  --mdc-list-list-item-one-line-container-height: 6rem;

  .mat-mdc-list-item {
    @apply text-white rounded-lg duration-300;
  
    &.active {
      @apply bg-white/20;
    }
  }
}

mat-stepper.mat-stepper-vertical {
  @apply bg-bluegray-700;
}

.pac-upload-table__upload-name {
  font-size: 800;
  margin-right: 1rem;
}

input.mat-mdc-input-element {
  @apply caret-yellow-500 bg-transparent outline-none;
}

.ngm-input.mat-mdc-input-element {
  @apply p-2 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 focus:bg-slate-300 dark:focus:bg-white/20
    focus:ring-2 focus:ring-yellow-200 focus:ring-offset-2;
}

.ngm-select {
  @apply bg-transparent p-2 rounded-md hover:bg-slate-200 focus:bg-slate-300 dark:hover:bg-white/10 focus:bg-white/20;
}

.pac-upload-preview__length {
  @apply text-right rounded-sm hover:bg-slate-200 focus:bg-slate-300 dark:hover:bg-white/10 focus:bg-white/20;
}

:host::ng-deep {
  .mat-mdc-nav-list {
    .mdc-list-item__content {
      @apply overflow-visible;
      .mdc-list-item__primary-text {
        @apply overflow-visible;
      }
    }
  }
}
